<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width"/>
    <meta name="author" content="www.yanshisan.cn"/>
    <meta name="robots" content="all"/>
    <title>留言板</title>
    <link rel="stylesheet" th:href="@{/font-awesome/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"/>
    <link rel="stylesheet" th:href="@{/css/master.css}"/>
    <link rel="stylesheet" th:href="@{/css/gloable.css}"/>
    <link rel="stylesheet" th:href="@{/css/nprogress.css}"/>
    <link rel="stylesheet" th:href="@{/css/message.css}"/>
    <style>
        .panel {
            padding: 10px;
        }
    </style>
</head>
<body>
<div class="header">
</div>
<header class="gird-header">
    <div class="header-fixed">
        <div class="header-inner">
            <a href="javascript:void(0)" class="header-logo" id="logo">MyBlog</a>
            <nav class="nav" id="nav">
                <ul>
                    <th:block th:include="include :: headnav"/>
                </ul>
            </nav>
            <a href="#" class="blog-user">
                <!--                <i class="fa fa-qq"></i>-->
            </a>
            <a class="phone-menu">
                <i></i>
                <i></i>
                <i></i>
            </a>
        </div>
    </div>
</header>
<div class="doc-container" id="doc-container">
    <div class="container-fixed">
        <div class="container-inner">
            <section class="msg-remark">
                <h1>留言板</h1>
                <p>
                    沟通交流，拉近你我！
                </p>
                <div class="panel">
                    <form class="layui-form" action="">
                        <div class="layui-form-item">
                        <textarea lay-verify="required" name="content" placeholder="请输入内容"
                                  class="layui-textarea"></textarea>
                        </div>

                        <button id="leaveMessage" class="layui-btn layui-btn layui-btn-normal" lay-submit="leaveMessage"
                                lay-filter="leaveMessage">提交留言
                        </button>

                    </form>
                </div>
            </section>
        </div>
        <div class="f-cb"></div>
        <div class="mt20">
            <ul class="message-list" id="message-list">
                <li class="zoomIn article layui-hide" id="first_child">

                </li>
            </ul>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/js/yss/gloable.js}"></script>
<script th:src="@{/js/plugins/nprogress.js}"></script>
<script>NProgress.start();</script>
<script th:src="@{/js/pagemessage.js}"></script>
<script th:src="@{/js/jquery/jquery.min.js}" charset="utf-8"></script>
<script>NProgress.start();</script>
<script>
    window.onload = function () {
        NProgress.done();
    };
</script>
<th:block th:include="include :: commonJs"/>
<th:block th:include="include :: showWeChartQR"/>
<script th:inline="javascript">
    let basePath = [[${#httpServletRequest.getContextPath()}]];

    layui.use(['form', 'flow'], function () {
        let form = layui.form,
            layer = layui.layer,
            flow = layui.flow;
        let first_child = $('#first_child');
        form.on('submit(leaveMessage)', function (data) {
            data = data.field;
            if (data.content == '') {
                layer.msg('留言内容不能为空');
                return false;
            }
            let leaveMessage = $('#leaveMessage');
            leaveMessage.addClass("layui-btn-disabled")
            $.ajax({
                type: "POST",
                url: basePath + '/message/leaveAMessage',
                data: {
                    "content": data.content
                },
                dataType: 'json',
                success: function (result) {
                    leaveMessage.removeClass("layui-btn-disabled")
                    if (result.code == 1) {
                        //成功
                        layui.layer.msg(result.msg, {icon: 1, time: 1000}, function () {
                            first_child.after(result.data[0]);
                        });
                    } else {
                        //失败
                        layer.msg(result.msg, {icon: 2, time: 500}, function () {
                            if (result.msg == '请先登录！') {
                                layer.open({
                                    type: 2,
                                    title: '登录',
                                    shade: 0.1,
                                    area: ['550px', '500px'],
                                    content: basePath + '/miniLogin.html',
                                });
                            }
                        });
                    }
                },
                error: function (arg) {
                    leaveMessage.removeClass("layui-btn-disabled")
                    layer.msg(arg, {icon: 2, time: 500});
                }
            });

            return false;
        })

        //流加载
        flow.load({
            elem: '#message-list' //指定列表容器
            , done: function (page, next) { //到达临界点（默认滚动触发），触发下一页
                let lis = [];
                //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
                $.get('/message/more?page=' + page, function (res) {
                    res = JSON.parse(res);
                    //假设你的列表返回在data集合中
                    if (res.code == 1) {
                        layui.each(res.data, function (index, item) {
                            lis.push(item);
                        });
                        //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                        //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                        next(lis.join(''), page < res.pages);
                    } else {
                        layer.msg(res.msg, {icon: 2, time: 1000});
                    }
                });
            }
            , end: "<h3 style='color: black;font-weight:bold'>没有更多了</h3>"
        });

    });
</script>
</body>
</html>
